<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>.:Welcome to LOUD:.</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" href="css/register.css" />
</head>

<body>

<div class="header">
    	<div class="title">
        	<h1> LOUD </h1>
            <p id="home"> <a href="#"> HOME </a>| <a href="#"> PROFILE </a> </p>
        </div>
        
   		<div class="searching">
        	<div id="sb-search" class="sb-search">
				<form>
				<input class="sb-search-input" placeholder="Search" type="text" value="" name="search" id="search">
				<input class="sb-search-submit" type="submit" value="">
				<span class="sb-icon-search"></span>
				</form>
			</div>
        </div>
</div>
	
<div class="content">
    	<div class="center">
        	<div class="login">
            	<div class="subtitle">
                	BOARD DISCUSSION 
                </div>
            	
                <div class="login_f">
        		<form>
    			<p>
        		<input id="username" type="text" name="login" placeholder="Username" required />
        		<input id="password" type="password" name='password' placeholder="Password" required />
        		<input class="submit" type="submit" name="submit" value="login">
    			</p>       
				</form>
                </div> <!-- End of login_f -->
                
        	</div> <!-- End of login -->
            
            <div class="advertisement_top">
                <h2> Advertisement </h2>
        	</div> <!-- End of advertisement_top -->
            
            <div class="breadcrumbs">
                <text id="nav_bar"> Home / Registration</text>
        	</div> <!-- End of breadcrumbs -->
            
            <div class="registration">
                <form class = "registration_form">
    			<table style="width:380px;">
                	<tr> <!-- row ke 1 -->
                    	<td>
                        <text id="registration_text">Username</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p>  <input id="registration_textbox" type="text" name="login" placeholder="Username" required /></p>
                        </td>
                    </tr>
                    
                    <tr> <!-- row ke 2 -->
                    	<td>
                        <text id="registration_text">Password</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p>  <input id="registration_textbox" type="password" name='password' placeholder="Password" required /> </p>
                        </td>
                    </tr>
                    
                    <tr> <!-- row ke 3 -->
                    	<td>
                        <text id="registration_text">Confirm Password</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p>  <input id="registration_textbox" type="password" name='password' placeholder="Confirm Password" required /> </p>
                        </td>
                    </tr>
                    
                    <tr> <!-- row ke 4 -->
                    	<td>
                        <text id="registration_text">First Name</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p>  <input id="registration_textbox" type="text" name='FirstName' placeholder="First Name" required /> </p>
                        </td>
                    </tr>
                    
                    <tr> <!-- row ke 5 -->
                    	<td>
                        <text id="registration_text">Last Name</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p> <input id="registration_textbox" type="text" name='LastName' placeholder="Last Name" required /> </p> 
                        </td>
                    </tr>
                    <tr> <!-- row ke 6 -->
                    	<td>
                        <text id="registration_text">Gender</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p> <select name="genderList">
                          <option value="Male" selected="selected">Male</option>
                          <option value="Female">Female</option>
                          </select></p> 
                        </td>
                    </tr>
                    <tr> <!-- row ke 7 -->
                    	<td>
                        <text id="registration_text">Email</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <p> <input id="registration_textbox" type="text" name='Email' placeholder="Email" required /> </p> 
                        </td>
                    </tr>
                    <tr> <!-- row ke 8 -->
                    	<td>
                        <text id="registration_text">Date of Birth</text>
                        </td>
                        <td>
                        :
                        </td>
                        <td>
                        <select id="form_dob_month" name="dob_month">
                            <option value="-">-</option>
                            <option value="1">January</option>
                            <option value="2">Febuary</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                         <select id="form_dob_day" name="dob_day">
                            <option value="-">-</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                         <select id="form_dob_year" name="dob_year">
                            <option value="-">-</option>
                            <option value="2011">2011</option>
                            <option value="2010">2010</option>
                            <option value="2009">2009</option>
                            <option value="2008">2008</option>
                            <option value="2007">2007</option>
                            <option value="2006">2006</option>
                            <option value="2005">2005</option>
                            <option value="2004">2004</option>
                            <option value="2003">2003</option>
                            <option value="2002">2002</option>
                            <option value="2001">2001</option>
                            <option value="2000">2000</option>
                            <option value="1999">1999</option>
                            <option value="1998">1998</option>
                            <option value="1997">1997</option>
                            <option value="1996">1996</option>
                            <option value="1995">1995</option>
                            <option value="1994">1994</option>
                            <option value="1993">1993</option>
                            <option value="1992">1992</option>
                            <option value="1991">1991</option>
                            <option value="1990">1990</option>
                            <option value="1989">1989</option>
                            <option value="1988">1988</option>
                            <option value="1987">1987</option>
                            <option value="1986">1986</option>
                            <option value="1985">1985</option>
                            <option value="1984">1984</option>
                        </select>
                        </td>
                    </tr>
                    
                </table>
                <br />
                <input name="term_condition" type="checkbox" value="term_condition"/> I have read and agree to terms and conditions
                <br />
                <br />
         <!--       <div class="reg_button"> -->
                <input class="continue_button" name="continue_button" type="submit" value="continue" />
                <input class="cancel_button" name="cancel_button" type="button" value="cancel" />
           <!--     </div> -->
                </form>
              	
        	</div> <!-- End of registration -->
            
            <div class="advertisement_bottom">
            	<h3> Advertisement </h3>
            </div> <!-- End of advertisement_bottom -->
            
            
        </div> <!-- End of center -->
</div> <!-- End of content -->
    
<div class="footer">

</div>


<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
			new UISearch( document.getElementById( 'sb-search' ) );
</script>
</body>
</html>
